<template>
  <div class="app-container">
      <div id="chart" style="height:600px;"></div>
  </div>
</template>

<script>
import waves from '@/directive/waves' // waves directive
import { init } from 'klinecharts'
import Pagination from '@/components/Pagination' // secondary package based on el-pagination
import {getHost} from '@/utils/socket' // secondary package based on el-pagination

export default {
  name: 'financeDashboard',
  components: { Pagination },
  directives: { waves },
  filters: {
  },
  data() {
    return {
      socket:"",
      tableKey: 0,
      list: null,
      kbarChart:null,
      total: 0,
      listLoading: false,
      symbol:"",
      connected:"loading",
      filterForm: {
        start: 1,
        perpage: 10,
        title: undefined,
        sort: '+id'
      }
    }
  },
  mounted(){
    // 初始化图表
      this.kbarChart = init("chart")
  },
  created() {
    this.symbol = this.$route.query && this.$route.query.symbol
    //this.init()
  },
  
  methods: {
    init: function () {
      if(typeof(WebSocket) === "undefined"){
          alert("您的浏览器不支持socket")
      }else{
          // 实例化socket
          this.socket = new WebSocket(getHost())
          // 监听socket连接
          this.socket.onopen = this.open
          // 监听socket错误信息
          this.socket.onerror = this.error
          // 监听socket消息
          this.socket.onmessage = this.getMessage
      }
    },
    open: function () {

        this.connected = 'loaded'

        this.getList()
    },
    error: function (e) {
        console.log("连接错误",JSON.stringify(e))
    },
    getMessage: function (receiveData) {
      let _this = this;
      receiveData = JSON.parse(receiveData.data)
        console.log(receiveData)
      if(receiveData.status != 200){
          console.log(receiveData.msg)
      }else{
        
        //{ close: 4976.16, high: 4977.99, low: 4970.12, open: 4972.89, timestamp: 1587660000000, volume: 204 },
        _this.kbarChart.applyNewData(receiveData.data.list)
        setTimeout(function(){
          _this.getList()
        },1000*60)
      }
    },
    send: function (params) {
      params = JSON.stringify(params)
      this.socket.send(params)
    },
    close: function () {
        console.log("socket已经关闭")
    },
    destroyed () {
        // 销毁监听
        this.socket.onclose = this.close
    },
    getList:function(){
      this.send({
        "conversationType":"quotation.realtime.list",
        "target":{"id":"3","symbol":this.symbol}
      })
    },
    handleFilter() {
      this.filterForm.page = 1
      this.getList()
    }
  }
}
</script>
<style>

</style>